<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>小艾爱跑 | 实时成绩打印</title>
<link rel="stylesheet" href="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/css%2Fbootstrap.min.css">
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico">

<style type="text/css">
    
    body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #1d1007; line-height:24px}

    h2 {
        margin-top: 28px;
        margin-bottom: 0px;
    }

    table{
        border-collapse: collapse;
        width: 100%;
        text-align: center;
    }
    td{
        border:1px solid #000;
        padding: 2px;
    }


</style>

</head>
<body>
    <div class="container">
        <h1 id="race_name"></h1>
        <h2 id="course_name">科目：</h2>
        <div id="table"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    //获取数据信息
    var obj = JSON.parse(localStorage.getItem('realtimeDataForPrintOld'));

    //表格信息
    var realtimeData = obj.realtimeData;

    // console.log(realtimeData);

    //删除事实成绩信息
    // localStorage.removeItem('realtimeDataForPrint');
    // console.log(realtimeData);
    createTable();

    //比赛名称
    document.getElementById('race_name').innerHTML = obj.race_name;
    //科目名称
    document.getElementById('course_name').innerHTML += obj.course_name;

    function createTable(){

        var div = document.getElementById("table"); 
        //创建table
        var table = document.createElement("table");


        if (realtimeData.type == 'oneway') {
            // 单程赛模板的场合
            //title
            //创建一行
            var row = table.insertRow();
            // ["bib","选手号"]
            var cell = row.insertCell();
            cell.innerHTML='选手号';
            // ["runner_name","姓名"]
            cell = row.insertCell();
            cell.innerHTML='姓名';
            // ["cp_name","CP点"]
            cell = row.insertCell();
            cell.innerHTML='CP点';
            // ["arrive_time","通过CP点时间"]
            cell = row.insertCell();
            cell.innerHTML='通过CP点时间';
            // ["rank","排名"]
            cell = row.insertCell();
            cell.innerHTML='排名';
            realtimeData.list.forEach(function(element){
                //创建一行
                var row = table.insertRow();
                // ["bib","选手号"]
                var cell = row.insertCell();
                cell.innerHTML=element.bib;
                // ["runner_name","姓名"]
                cell = row.insertCell();
                cell.innerHTML=element.runner_name;
                // ["cp_name","CP点"]
                cell = row.insertCell();
                cell.innerHTML=element.cp_name;
                // ["arrive_time","通过CP点时间"]
                cell = row.insertCell();
                cell.innerHTML=element.arrive_time.substr(11);
                // ["rank","排名"]
                cell = row.insertCell();
                cell.innerHTML=element.rank;
            }) 

        } else if (realtimeData.type == 'circle'){
            // 绕圈赛模板的场合
            //title
            //创建一行
            var row = table.insertRow();
            // ["bib","选手号"]
            var cell = row.insertCell();
            cell.innerHTML='选手号';
            // ["runner_name","姓名"]
            cell = row.insertCell();
            cell.innerHTML='姓名';
            // ["use_time","用时"]
            cell = row.insertCell();
            cell.innerHTML='用时';
            // ["circle_number","圈数"]
            cell = row.insertCell();
            cell.innerHTML='圈数';
            // ["rank","排名"]
            cell = row.insertCell();
            cell.innerHTML='排名';
            realtimeData.list.forEach(function(element){
                //创建一行
                var row = table.insertRow();
                // ["bib","选手号"]
                var cell = row.insertCell();
                cell.innerHTML=element.bib;
                // ["runner_name","姓名"]
                cell = row.insertCell();
                cell.innerHTML=element.runner_name;
                // ["use_time","用时"]
                cell = row.insertCell();
                cell.innerHTML=element.use_time;
                // ["circle_number","圈数"]
                cell = row.insertCell();
                cell.innerHTML=element.circle_number;
                // ["rank","排名"]
                cell = row.insertCell();
                cell.innerHTML=element.rank;
            }) 

        } else if (realtimeData.type == 'team') {
            // 团队模板的场合
            //title
            var row = table.insertRow();//创建一行
            // ["team_name","团队名称"]
            var cell = row.insertCell();
            cell.innerHTML='团队名称';
            // ["team_gender","团队性别"]
            cell = row.insertCell();
            cell.innerHTML='团队性别';
            // ["official_time","赛会成绩"]
            cell = row.insertCell();
            cell.innerHTML='赛会成绩';
            // ["rank","排名"]
            cell = row.insertCell();
            cell.innerHTML='排名';
            realtimeData.list.forEach(function(element){
                var row = table.insertRow();//创建一行
                // ["team_name","团队名称"]
                var cell = row.insertCell();
                cell.innerHTML=element.team_name;
                // ["team_gender","团队性别"]
                cell = row.insertCell();
                cell.innerHTML = (element.team_gender = 'male' ? '男' : '女');
                // ["official_time","赛会成绩"]
                cell = row.insertCell();
                cell.innerHTML=element.official_time;
                // ["rank","排名"]
                cell = row.insertCell();
                cell.innerHTML=element.rank;
            }) 
        }
        div.appendChild(table); 

    }
</script> 